<style scoped>

</style>

<template>
  <div>
    <h3>品牌:{{brand}}</h3>
    <h3>价格:{{cprice}}</h3>
    <h3>颜色:{{color}}</h3>
    <button @click="add">价格加1</button>
  </div>
</template>
<script>
export default {
  name: "Car",
  data(){
    return {
      cprice : this.price
    }
  },
  // data(){
  //   return {
  //     brand : '宝马520',
  //     price : 10,
  //     color : '黑色'
  //   }
  // }

  //在Car这个子组件当中使用props配置项进行数据的接收

  //第一种:简单的接收方式,直接采用数组接收
  // props : ['brand' , 'color' , 'price']

  //第二种:添加类型限制
  // props : {
  //   brand : String,
  //   color : String,
  //   price : Number
  // },

  //第三种:添加类型限制,并且还可以添加默认值,还可以添加必要性
  //避免直接更改prop,因为每当父组件重新渲染的时候,该值都会被覆盖
  //注意:不要修改prop中的数据
  props : {
    brand : {
      type : String,
      required : true
    },
    color : {
      type : String,
      default : '红色'
    },
    price : {
      type : Number,
      required: true
    }
  },
  methods : {
    add(){
      this.cprice++
    }
  }
}
</script>